<!--
 * @Author: tangcj 572036028@qq.com
 * @Date: 2024-01-25 09:58:30
 * @LastEditors: tangcj 572036028@qq.com
 * @LastEditTime: 2024-02-01 15:33:43
 * @FilePath: /health-gpt-website/src/views/Home/index.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <full-page :options="options" ref="fullpage" class="fullpage_homePage">
    <div class="section">
      <Page1 @next="next" />
    </div>
    <div class="section">
      <Page2 ref="page2" @next="next" />
    </div>
    <div class="section">
      <Page3 ref="page3" @next="next" />
    </div>
    <div class="section">
      <Page4 ref="page4" @next="next" />
    </div>
    <div class="section">
      <Page5 ref="page5" @next="next" />
    </div>
    <div class="section">
      <Page6 ref="page6" @next="next" :showArrow="showpage6Arrow" />
    </div>
    <div class="section footerClass">
      <Footer :showArrow="true" @toTop="toTop" />
    </div>
  </full-page>
</template>
<script>
import Page1 from "./components/Page1"
import Page2 from "./components/Page2"
import Page3 from "./components/Page3"
import Page4 from "./components/Page4"
import Page5 from "./components/Page5"
import Page6 from "./components/Page6"
import Footer from "../../components/Footer"
export default {
  components: { Page1, Page2, Page3, Page4, Page5, Page6, Footer },
  data () {
    return {
      pageNum: 0,
      options: {
        // licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
        //是否显示导航，默认为false
        navigation: true,
        afterLoad: this.afterLoad,
      },
      showPage2: false,
      showpage6Arrow: false,
    }
  },
  mounted () {
    this.$refs.fullpage.api.moveTo(1)
  },
  methods: {
    // 切屏后回调 (调用子页面加载动画fun)
    afterLoad () {
      this.showpage6Arrow = false
      let a = document.body.className
      console.log(a)
      console.log(a.split('-')[2])
      if (a == 'fp-viewing-1') {
        this.$refs.page2.initAnimation()
      }
      else if (a == 'fp-viewing-2') {
        this.$refs.page3.initAnimation()
      }
      else if (a == 'fp-viewing-3') {
        this.$refs.page4.initAnimation()
      }
      else if (a == 'fp-viewing-4') {
        this.$refs.page5.initAnimation()
      }
      else if (a == 'fp-viewing-5' || a == 'fp-viewing-6') {
        this.$refs.page6.initAnimation()
      }
      if (a == 'fp-viewing-5') {
        this.showpage6Arrow = true
      }
    },
    // upFn = () { // 向上滚动一页
    //     fullpageRef?.value?.api.moveSectionUp();
    // },
    next () { // 向下滚动一页
      this.$refs.fullpage.api.moveSectionDown()
    },
    toTop () {
      this.$refs.fullpage.api.moveTo(1)
    },
  },
}


</script>
<style lang="less">
.fp-right {
  left: 20px;
  width: 100px;
  ul li a span {
    background: #d9d9d9 !important;
  }
  ul li .active span {
    background: #6ea7f1 !important;
  }
}
.fullpage_homePage {
  .clickBox {
    width: 40px;
    height: 100px;
    position: absolute;
    bottom: 30px;
    left: 50px;
    cursor: pointer;

    .arrowDown {
      position: absolute;
      width: 0;
      height: 0;
      border-right: solid 10px transparent;
      animation: arrow 1.5s linear infinite;
      img {
        width: 30px;
      }
    }
    @keyframes arrow {
      0% {
        bottom: 100px;
        opacity: 1;
      }
      100% {
        bottom: 20px;
        opacity: 0;
      }
    }
  }
  .footerClass {
    height: 190px !important;
  }
  .fp-overflow {
    height: 100%;
  }
  .fp-watermark {
    display: none;
  }
}
</style>